<template>
  <div
      class="slide-verify-warper no-copy"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
      @mouseover="mouseover">
    <div class="slider-captcha-bar">
      <!--<div class="slider-captcha-bar_btn slider-captcha_track-vcode-loading" v-if="isVerify">-->
      <!--<svg-icon class="icon" :class="[{load:isVerify}]" icon-class="toolbar-refresh"/>-->
      <!--<span class="vcode-loading-text">验证中…</span>-->
      <!--</div>-->
      <div
          class="slider-captcha-bar_btn slider-captcha-bar_success"
          v-if="status === 'success'">
        <i class="success-icon el-icon-circle-check"></i>
        <span class="vcode-success-text">验证成功</span>
      </div>
      <div
          class="slider-captcha-bar_btn slider-captcha_track-vcode-loading"
          v-else-if="isLoadVcode">
        <!--<svg-icon class="icon" :class="[{load:isLoadVcode}]" icon-class="toolbar-refresh"/>-->
        <span class="el-icon-refresh" :class="[{ load: isLoadVcode }]"></span>
        <span class="vcode-loading-text">加载中…</span>
      </div>
      <div
          class="slider-captcha-bar_btn hover-before-show pointer"
          @click="tapVerify"
          v-else-if="!isMouseenter && !isClickBlock">
        立即点击验证
      </div>
      <div
          class="slider-captcha-bar_btn hover-after-show slider-captcha-bar_track"
          v-else-if="isMouseenter || isClickBlock">
        <div class="slider-captcha_track-text-box" v-if="!isClickBlock">
          向右拖动滑块使图片重合<i
            class="animated infinite slideInLeftRight el-icon-right"
            v-if="false"></i>
        </div>
        <div
            class="slider-captcha_track-block"
            :class="[status]"
            :style="{ left: slider.bx + 'px' }"
            @mousedown.prevent="mousedown">
          <!--<svg-icon class="icon" :class="[{load:isVerify}]" icon-class="toolbar-refresh" v-if="isVerify"/>-->
          <i class="icon-right animated infinite slideInLeftRight el-icon-right"></i>
          <!-- <span
            class="el-icon-refresh"
            :class="[{ load: isVerify }]"
            v-if="isVerify"
          ></span>
          <i
            class="icon-right animated infinite slideInLeftRight el-icon-right"
            v-else
          ></i> -->
        </div>
        <div
            class="slider-captcha_track-progress"
            :style="[
            { width: progressBgBar + slider.bx + 'px' },
            { backgroundColor: '' },
          ]"
            :class="[status]"></div>
      </div>
    </div>

    <transition name="el-fade-in-linear">
      <div class="slide-verify-picture" v-if="isMouseenter || isClickBlock">
        <div class="slide-verify-picture-pic-warper">
          <div class="slide-captcha-basic-pic">
            <img
                class="back-image"
                v-show="options.backImage"
                :src="`data:image/png;base64,${options.backImage}`"
                alt=""/>
          </div>
          <div
              class="slide-captcha-basic-sub-slider"
              :style="{ left: slider.mx + 'px', top: options.yHeight + 'px' }"
              :class="[status]">
            <img
                class="slider-block"
                v-show="options.slidingImage"
                :src="`data:image/png;base64,${options.slidingImage}`"
                ref="sliderBlock"
                alt=""/>
          </div>
          <div class="refresh-vcode refresh-btn pointer" @click="loadVcode">
            <!--<svg-icon class="icon" :class="[{load:isLoadVcode}]" icon-class="toolbar-refresh" title="刷新验证码"/>-->
            <span
                class="el-icon-refresh"
                :class="[{ load: isLoadVcode }]"
                title="刷新验证码"></span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "slide-verify",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    isLoadVcode: {
      type: Boolean,
      default: false,
    },
    isVerify: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Object,
      default: () => {
        return {
          backImage: "",
          slidingImage: "",
          yHeight: 0,
        };
      },
    },
  },
  data() {
    return {
      isMouseenter: false,
      isClickBlock: false,
      progressBgBar: 5,
      slider: {
        mx: 0,
        bx: -1,
      },
      status: "default",
    };
  },
  methods: {
    loadVcode() {
      this.$emit("refresh");
    },
    mouseover() {
      this.$emit("hover");
    },
    mouseenter() {
      if (this.disabled || this.status === "success") {
        return false;
      }
      this.isMouseenter = true;
    },
    mouseleave() {
      this.isMouseenter = false;
    },
    // 点击
    tapVerify() {
      if (this.disabled) {
        return false;
      }
      this.isMouseenter = true;
    },
    success() {
      this.slider.mx = 0;
      this.slider.bx = -1;
      this.status = "success";
      this.isMouseenter = false;
      this.isClickBlock = false;
    },
    error() {
      this.slider.mx = 0;
      this.slider.bx = -1;
      this.status = "error";
      setTimeout(() => {
        this.status = "default";
      }, 300);
    },
    // 鼠标按下
    mousedown(e) {
      this.isClickBlock = true;
      const downCoordinate = {x: e.x, y: e.y};
      // x轴数据
      let x = 0;
      const move = (moveEV) => {
        x = moveEV.x - downCoordinate.x;
        if (x > 251) {
          this.slider.mx = 250;
          this.slider.bx = 250;
        } else if (x < 0) {
          this.slider.mx = 0;
          this.slider.bx = -1;
        } else {
          this.slider.mx = x;
          this.slider.bx = x;
        }
      };

      const up = () => {
        this.isClickBlock = false;
        document.removeEventListener("mousemove", move);
        document.removeEventListener("mouseup", up);
        // console.log(this.slider.bx);
        // 请求验证接口
        // this.slider.mx = 0
        // this.slider.bx = -1
        // this.status = 'error'
        // setTimeout(() => {
        //   this.status = 'success'
        // }, 300)
        this.$emit("submit", this.slider.mx, (res) => {
          if (!res) {
            this.error()
          } else {
            this.success()
          }
        });
        // setTimeout(() => {
        //   if (this.$props.isVerify) {
        //     this.error()
        //   } else {
        //     this.success()
        //   }
        // }, 300);

        // this.slider.mx = 0
        // this.slider.bx = -1
      };

      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", up);
    },
  },
};
</script>

<style scoped lang="less">
  .slide-verify-warper {
    width: 300px;
    position: relative;

    .slider-captcha-bar {
      width: 100%;
      height: 40px;

      .slider-captcha-bar_btn {
        width: 100%;
        height: 100%;
        border: 1px solid #0fbda0;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }

      .slider-captcha-bar_track {
        position: relative;
        border-color: #d2d2d2;

        .slider-captcha_track-text-box {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f7f7f7;
          color: #0fbda0;
        }

        .slider-captcha_track-block {
          position: absolute;
          width: 50px;
          height: 40px;
          background: #ffffff;
          border: 1px solid #0fbda0;
          border-radius: 4px;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2;
          font-size: 20px;
          cursor: move;

          &.success {
            border-color: #0fbda0;
          }

          &.error {
            transition: all 0.3s;
            border-color: #bd3842;
          }

          .icon {
            fill: #0fbda0;
            width: 16px;
            height: 16px;
          }

          .load {
            animation: turn 0.5s linear infinite;
          }

          .icon-right {
            color: #0fbda0;
          }
        }

        .slider-captcha_track-progress {
          position: absolute;
          height: 40px;
          left: 0;
          top: -1px;
          width: 0;
          border-radius: 4px;
          background-color: #0fbda0;

          &.success {
            background-color: #0fbda0;
          }

          &.error {
            transition: all 0.3s;
            background-color: #bd3842;
          }
        }
      }

      .slider-captcha_track-vcode-loading {
        .icon {
          fill: #0fbda0;
          width: 16px;
          height: 16px;
        }

        .load {
          animation: turn 0.5s linear infinite;
        }

        .vcode-loading-text {
          font-size: 14px;
          margin-left: 5px;
        }
      }

      .slider-captcha-bar_success {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0fbda0;

        .success-icon {
          font-size: 20px;
          font-weight: bold;
          margin-right: 5px;
        }

        .vcode-success-text {
          font-size: 14px;
        }
      }
    }

    .slide-verify-picture {
      position: absolute;
      left: 0;
      bottom: 40px;
      width: 100%;
      height: 160px;
      padding-bottom: 10px;
      /*border: 1px solid #0FBDA0;*/
      border-radius: 4px;
      z-index: 10;
      background-color: #ececec;
      overflow: hidden;


      .slide-verify-picture-pic-warper {
        height: 100%;
        width: 100%;
        position: relative;

        .slide-captcha-basic-pic {
          height: 150px;
          width: 300px;
          border-radius: 4px;
          overflow: hidden;

          .back-image {
            width: 100%;
            height: 100%;
          }
        }

        .slide-captcha-basic-sub-slider {
          position: absolute;
          width: 60px;
          height: 60px;
          z-index: 10;
          top: 0;
          left: 10px;

          &.error {
            transition: all 0.3s;
          }

          .slider-block {
            width: 100%;
            height: 100%;
          }
        }

        .refresh-btn {
          height: 30px;
          width: 30px;
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .refresh-vcode {
          background-color: rgba(0, 0, 0, 0.5);

          .icon {
            fill: #fff;
          }

          .el-icon-refresh {
            font-size: 16px;
            color: #ffffff;
          }

          .load {
            animation: turn 0.5s linear infinite;
          }
        }
      }
    }
  }

  /*禁止选中复制*/
  .no-copy {
    -moz-user-select: none; /* Firefox私有属性 */
    -webkit-user-select: none; /* WebKit内核私有属性 */
    -ms-user-select: none; /* IE私有属性(IE10及以后) */
    -khtml-user-select: none; /* KHTML内核私有属性 */
    -o-user-select: none; /* Opera私有属性 */
    user-select: none; /* CSS3属性 */
  }

  /*设置图片不可拖动*/
  img {
    -webkit-user-drag: none;
  }

  .slideInLeftRight {
    -webkit-animation-name: slideInLeftRight;
    animation-name: slideInLeftRight;
  }

  @-webkit-keyframes turn {
    0% {
      -webkit-transform: rotate(0deg);
    }
    25% {
      -webkit-transform: rotate(90deg);
    }
    50% {
      -webkit-transform: rotate(180deg);
    }
    75% {
      -webkit-transform: rotate(270deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @-webkit-keyframes slideInLeftRight {
    0% {
      -webkit-transform: translateX(-25%);
      transform: translateX(-25%);
      visibility: visible;
    }

    100% {
      -webkit-transform: translateX(25%);
      transform: translateX(25%);
    }
  }
</style>
